<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%-- <%@include file="/jsp/common/scriptInc.jsp"%> --%>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/yizheng/quotaOutput.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
	#quotaGroup,#quota{
		height:400px;
		width:260px;
		overflow-y: scroll;
	}
	.panel-heading{font-size: 16px;}
	.panel-primary{border:1px solid #428bca;}
	#quotaGroupBox{
		-webkit-transition:height .6s ease;
		transition:height .6s ease;
		height:0;
		overflow-y: scroll;
		}
	.progress{
		-webkit-transition:all .6s ease;
		transition:all .6s ease;}
	#addPanel{
		position: absolute;
		/* top:214px;
		left:332px; */
		top:43px;
		left:260px;
		z-index:998;
		overflow: hidden;
		width:0;
		height:401px;
		border-left: none;
		transition:all .4s ease;
		-webkit-transition:all .4s ease;}
	#quotaGroup a{cursor: pointer;}
</style>
<title>设置/输出指标设置</title>
</head>
<body>
<div class="container-fluid" style="width:1260px;max-width: 1260px;">
	<div  class="row">
		<div class="col-xs-12">
			<label for="depSelect" style="width:100px;margin-left:34%;">科室：</label>
			<select class="form-control" id="depSelect" style="width:400px;margin:0 auto;">
			</select>
			<div class="panel panel-default" style="width:400px;left:50%;margin-left:-200px;position: absolute;z-index: 999;">
			  <div class="panel-body" id="quotaGroupBox" ondragover="allowDrop(event)" ondrop="drop(event)">
			    
			  </div>
			  <div class="panel-footer" style="overflow: hidden;padding: 4px 10px;">
			  	<a class="btn btn-info btn-sm pull-right" onclick="setOutputQuota()" 
			  		style="display: none;" id="submit-btn"><i class="glyphicon glyphicon-ok"></i>&nbsp;提交
			  	</a>
			  </div>
			</div>
		</div>
	</div>
	
	<div  class="row">
		<div style="float:left;margin-left: 30px;position: relative;">
		
			<div class="panel panel-primary" style="z-index: 999;position: relative;">
			  <div class="panel-heading">指标分组<a class="pull-right" 
			  		href="javascript:toggleAddBox();" style="color: white;font-size: 14px;">
			  		<i class="glyphicon glyphicon-plus"></i>新建分组</a>
			  </div>
			  <div class="panel-body" id="quotaGroup" ondragover="allowDrop(event)" ondrop="drop(event)">
			    
			  </div>
			</div>
			
			<div class="panel panel-primary" id="addPanel">
			  <div class="panel-body" style="width:400px;height:360px;padding:10px;overflow: hidden;">
			  	<button type="button" class="close" onclick="toggleAddBox()" style="position: absolute;left:90%;">
		      		<span style="font-size: 30px;">&times;</span>
		      	</button>
			  	<h4 align="center">新建指标组</h4>
			  	指标组名称：
			  	<input type="text" class="form-control"><small style="position: absolute;color: #aaa;">请从右侧拖动指标至下方空白处</small><hr>
			  	<div id="addBox" style="width: 100%;height: 220px;overflow-y:scroll;"
			  		 ondragover="allowDrop(event)" ondrop="drop(event)"></div>
			  </div>
			  <div class="panel-footer" style="overflow: hidden;padding: 4px 10px;">
			  	<a class="btn btn-info btn-sm pull-right" onclick="addGroup()">
			  		<i class="glyphicon glyphicon-ok"></i>&nbsp;确定
			  	</a>
			  </div>
			</div>
			
		</div>
		
		<div style="width:400px;float:left;font-size:40px;color: #ccc;font-family: 黑体;
					margin-left: 140px;padding:40px;text-align: center;">
			<i style="font-size:200px;" class="glyphicon glyphicon-transfer"></i><br>
			选择科室后拖动左右两侧指标进行添加或删除
		</div>
		
		<div style="float: right;margin-right: 30px;">
		
			<div class="panel panel-primary">
			  <div class="panel-heading">所有指标</div>
			  <div class="panel-body" id="quota" ondragover="allowDrop(event)" ondrop="drop(event)">
			  </div>
			</div>
			
		</div>
	</div>
</div>
</body>
</html>